<template>
  <div>
    <Divider>需求登记</Divider>
    需求编号
    <Input style="width: 15%"></Input>
    <Button type="primary" style="width:100px">新增需求</Button>
    <Divider>需求维护</Divider>
    需求编号
    <Input style="width: 15%"></Input>
    <Button type="primary" style="width:100px" >需求查询</Button>
    
    <Divider>需求信息</Divider>
    <Table border :columns="columns" :data="data">
      <template slot-scope="{ row, index }" slot="id">
        <Input type="text" v-model="editData.id" v-if="editIndex === index" />
        <span v-else>{{ row.id }}</span>
      </template>
      <template slot-scope="{ row, index }" slot="brName">
        <Input
          type="text"
          v-model="editData.brName"
          v-if="editIndex === index"
        />
        <span v-else>{{ row.brName }}</span>
      </template>
      <template slot-scope="{ row, index }" slot="brType">
        <Select
          v-model="editData.brType"
          v-if="editIndex === index"
          :transfer="true"
        >
          <Option value="维护类需求" key="1">维护类需求</Option>
          <Option value="年度预算制" key="2">年度预算制</Option>
          <Option value="项目需求" key="3">项目需求</Option>
          <Option value="事件需求" key="4">事件需求</Option>
        </Select>
        <span v-else>{{ row.brType }}</span>
      </template>
      <!-- 业务部门 -->
      <template slot-scope="{ row, index }" slot="ywBranch">
        <Input
          type="text"
          v-model="editData.ywBranch"
          v-if="editIndex === index"
        />
        <span v-else>{{ row.ywBranch }}</span>
      </template>
      <!-- 业务负责任人 -->
      <template slot-scope="{ row, index }" slot="ywName">
        <Input
          type="text"
          v-model="editData.ywName"
          v-if="editIndex === index"
        />
        <span v-else>{{ row.ywName }}</span>
      </template>

      <template slot-scope="{ row, index }" slot="kjName">
        <Select
          v-model="editData.kjName"
          v-if="editIndex === index"
          :transfer="true"
        >
          <Option value="奚秋月" key="1">奚秋月</Option>
          <Option value="王金鹏" key="2">王金鹏</Option>
          <Option value="陈小忠" key="3">陈小忠</Option>
          <Option value="郭蓓" key="5">郭蓓</Option>
          <Option value="夏浩男" key="6">夏浩男</Option>
          <Option value="刘乾" key="7">刘乾</Option>
        </Select>
        <span v-else>{{ row.kjName }}</span>
      </template>

      <template slot-scope="{ row, index }" slot="actions">
        <div v-if="editIndex === index">
          <Button @click="handleSave(index)">保存</Button>
          <Button @click="editIndex = -1">取消</Button>
        </div>
        <div v-else>
          <Button @click="handleEdit(row, index)">操作</Button>
        </div>
      </template>
    </Table>
  </div>
</template>
<script>
// 表格增加列  先brInfoSelect增加列名，在column配置对应列名的英文ID，在template配置对应的ID，同时增加CheckboxGroup中的选项
export default {
  data() {
    return {
      oldData: "",
      brInfoSelect: [
        "需求编号",
        "需求名称",
        "需求类型",
        "业务部门",
        "业务负责人",
        "科技负责人",
      ],
      editIndex: -1, // 当前聚焦的输入框的行数
      editData: {},
      data: [
        {
          id: "X20200902000009",
          brName: "关于校验汇兑凭证号码的业务需求书",
          brType: "维护类需求",
          ywBranch: "运营管理部",
          kjName: "",
        },
        {
          id: "X20200902000010",
          brName: "关于校验汇兑凭证号码的业务需求书1",
          brType: "维护类需求1",
          ywBranch: "运营管理部1",
          kjName: "",
        },
      ],
      column: {
        需求编号: "id",
        需求名称: "brName",
        需求类型: "brType",
        业务部门: "ywBranch",
        业务负责人: "ywName",
        科技负责人: "kjName",
        柜面牵头: "gmFlag",
        柜面负责人: "gmName",
        分配厂商: "csBranch",
        开发人员: "csName",
        测试经理: "testBranch",
        测试人员: "testName",
        购物车: "gwcFlag",
        无纸化: "wzhFlag",
        电子印章: "dzyzFlag",
        无纸化: "wzhFlag",
        TWS: "twsFlag",
        GTP: "gtpFlag",
        定时任务: "timmerFlag",
        SQL: "sqlFlag",
        涉及系统: "otherBranch",
        工作量: "workCount",
        当前进度: "process",
        计划投产时间: "planTime",
        实际投产时间: "realTime",
      },
    };
  },
  methods: {
    handleEdit(row, index) {
      for (var item in this.data[index]) {
        this.editData[item] = this.data[index][item];
      }
      this.editIndex = index;
    },
    handleSave(index) {
      for (var item in this.editData) {
        this.data[index][item] = this.editData[item];
      }
      // TODO 更新数据库
      this.editIndex = -1;
    },
    handleCancle(index) {
      this.editIndex = -1;
    },
  },
  computed: {
    columns() {
      // 读取选项，组合表格选项
      var res = [];
      for (var i in this.brInfoSelect) {
        // console.log(i);
        res.push({
          title: this.brInfoSelect[i],
          slot: this.column[this.brInfoSelect[i]],
        });
      }
      // console.log(res);
      res.push({
        title: "操作",
        slot: "actions",
      });
      return res;
    },
  },
};
</script>